<template>
	<div class="layout">
		<div class="container">
			<div class="header">
				<div class="back" @click="goBack">
					<div class="back_img"></div>
					<!-- <image class="back_img" src="../../static/img/home_icon.svg"></image> -->
					<div class="back_text">Back to Home</div>
				</div>
			</div>
			<div class="logo">
				<image class="speaks" src="../../static/img/Risk Warning and.svg" />
				<image class="wins" src="../../static/img/Disclaimer.svg" />
				<image class="risk" src="../../static/img/Risk Warning and Disclaimer.svg" />
			</div>
			<div class="disclaimer">
				<div class="main">
					<div class="title">Creative and Reverse Perspective</div>
					<div class="desc">This website/project offers a “Devil’s Commentary” scenario inspired by classic Christian literary techniques, adopting a negative perspective to highlight the truth of the Bible. This approach aims to encourage deeper reflection and is not intended to trivialize or entertain with Scripture.</div>
					<div class="title">AI Technology and Variability</div>
					<div class="desc">The dialogue role is powered by AI technology, which may produce inaccuracies or inconsistencies.<br/>In cases of conflict, please refer to the original biblical text and the teachings of the Christian faith.<br/>This website is intended as a creative interactive experience and does not replace theological authority.</div>
					<div class="title">Negative Language and Intellectual Impact</div>
					<div class="desc">The character employs scathing, dark, and painful language to discuss Scripture, aiming to contrast and highlight the truth.<br/>If you find such intense language or potentially offensive content unsuitable, please do not proceed further.</div>
					<div class="title">Not Representing Official Theological Doctrine</div>
					<div class="desc">The “reverse interpretation” presented here is a literary expression and does not represent the authentic teachings of any specific Christian denomination.<br/>The ultimate interpretation of faith and Scripture should always return to the Bible itself and the traditions of the Christian faith.</div>
					<div class="title">Risk and Voluntary Choice</div>
					<div class="desc">This experience may provoke negative feelings or spiritual challenges.<br/>If you are unable to accept this, please do not continue. By choosing to proceed, you acknowledge and agree to take on these risks.</div>
					<div class="title">The Purpose of BibleWin</div>
					<div class="desc">This unique “Devil’s Perspective” aims to inspire deeper reverence and reflection on Scripture.<br/>We emphasize that this is an innovative attempt at integrating AI, and any errors should be met with grace, always holding the truth of the Bible as the ultimate standard.<br/>May this experience bring fresh insights and help you grow in your understanding and reverence for the Word of God through exploration and reflection.</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
}
</script>


<style scoped lang="scss">
.layout {
	position: relative;
	background: url('../../static/img/bg-2.jpg') center no-repeat;
	background-size: cover;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.12+100 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.container {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.header {
	padding-top: 16upx;
	
	.back {
		display: inline-flex;
		align-items: center;
		flex-direction: column;
		margin: 40upx 20upx 0 120upx;
		
		&:hover {
			
			.back_img {
				background: url('../../static/img/home_icon_hover.svg') center no-repeat;
				background-size: contain;
			}
			
			
			.back_text {
				color: #fff;
			}
		}
	}
	
	.back_img {
		flex-shrink: 0;
		width: 120upx;
		height: 120upx;
		
		cursor: pointer;
		background: url('../../static/img/home_icon.svg') center no-repeat;
		background-size: contain;
		
		&:hover {
			background: url('../../static/img/home_icon_hover.svg') center no-repeat;
			background-size: contain;
		}
	}
	
	.back_text {
		flex: 1;
		color: #F9E0C8;
		font-size: 32upx;
		font-weight: 500;
		margin : 28upx 0 48upx;
	}
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40upx;
	
	.speaks, .wins {
		display: none;
	}
	
	.risk {
		width: 1094upx;
		height: 112upx;
	}
}

.disclaimer {
	flex: 1;
	width: 80%;
	max-width: 90%; /* 防止溢出 */
	min-height: 100px; /* 最小高度 */
	background: 
	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M 5,0 L 195,0 A 5 5 0 0 0 200,5 L 200,95 A 5 5 0 0 0 195,100 L 5,100 A 5 5 0 0 0 0,95 L 0,5 A 5 5 0 0 0 5,0 Z" fill="rgba(23, 23, 23, 0.75)" stroke="%23A0865B" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>')
	no-repeat center center / 100% 100%; /* 背景图居中且完全填充 */
	padding: 20px; /* 内边距 */
	margin: 0 auto 80upx;
	box-sizing: border-box; /* 内边距不影响宽度 */
	
	.main {
		height: 90%;
		padding: 32upx 44upx;
		overflow-y: auto;
	}
	
	.title {
		color: #FFF;
		font-size: 40upx;
		font-weight: 500;
		line-height: 48upx;
		margin-bottom: 16upx;
	}
	
	.desc {
		color: #FFF;
		font-size: 28upx;
		font-weight: 500;
		line-height: 34upx;
		margin-bottom: 32upx;
	}
}

@media (max-width: 1024px) {
	.header  {
		.back {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 0;
		}
		
		.back_img {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin: 10upx 20upx 0 32upx;
		}
		
		.back_text {
			flex: 1;
			color: #F9E0C8;
			font-size: 24upx;
			font-weight: 500;
			margin: 0;
		}
	}
	
	.logo {
		margin-top: 40upx;
		
		.risk {
			width: 700upx;
			height: 72upx;
		}
	}
	
	.disclaimer {
		max-width: 88%;
		margin-bottom: 40upx;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 440" preserveAspectRatio="none"><path d="M 10,0 L 330,0 A 10 10 0 0 0 340,10 L 340,430 A 10 10 0 0 0 330,440 L 10,440 A 10 10 0 0 0 0,430 L 0,10 A 10 10 0 0 0 10,0 Z" fill="rgba(23, 23, 23, 0.90)" stroke="%23A0865B" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>') no-repeat center center / 100% 100%;
	
		.main {
			height: 100%;
			padding: 0;
		}
		
		.title {
			font-size: 28upx;
		}
		
		.desc {
			font-size: 24upx;
		}
	}
}
</style>